<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>学生成绩管理系统</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="student.css">
</head>
<body>
<div class="layout">
  <!-- 侧边栏 -->
  <nav class="sidebar">
    <div class="sidebar-title">学生成绩管理系统</div>
    <div class="sidebar-menu">
      <a href="student_course.html">我的课程</a>
      <a href="student_score.html">我的成绩</a>
      <a href="student_chooseCourse.html">选课</a>
      <a class="active" href="student_deleteCourse.html">退课</a>
    </div>
    <div class="sidebar-logout">退出登录</div>
  </nav>
  <!-- 主内容区 -->
  <div class="main">
    <div class="header">
      <span class="header-title">学生成绩管理系统</span>
      <span class="header-user" id="username"></span>
    </div>
    <div class="content">
      <div class="decoration-yellow"></div>
      <div class="decoration-red"></div>
      <div class="decoration-green"></div>

      <div class="card">
        <table class="table">
          <thead>
          <tr>
            <th>课程号</th><th>课程名</th><th>教师名</th><th>学时</th><th>地点</th><th>操作</th>
          </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div id="deleteConfirmModal" class="modal">
  <div class="modal-content">
    <span class="close-btn" onclick="closeDeleteConfirmModal()">&times;</span>
    <h3>确认删除</h3>
    <p>您确定要删除这条记录吗？此操作不可恢复。</p>
    <div class="button-group">
      <button type="button" class="btn btn-danger" onclick="confirmDelete()">确认删除</button>
      <button type="button" class="btn btn-secondary" onclick="closeDeleteConfirmModal()">取消</button>
    </div>
  </div>
</div>
</div>
<script>
  let currentCourseId = null;
  let currentRow = null;
  let studentId = sessionStorage.getItem('user_id');

  // 关闭弹窗
  function closeDeleteConfirmModal() {
    document.getElementById('deleteConfirmModal').style.display = 'none';
    currentCourseId = null;
    currentRow = null;
  }

  // 获取已选课程并渲染表格
  document.addEventListener("DOMContentLoaded", function () {
    const tableBody = document.querySelector(".table tbody");

    fetch(`/student/selections/${studentId}`)
      .then(response => response.json())
      .then(res => {
        const data = res.data || [];
        data.forEach(course => {
          const row = document.createElement("tr");
          row.innerHTML = `
              <td>${course.courseId}</td>
              <td>${course.courseName}</td>
              <td>${course.teacherName}</td>
              <td>${course.courseHours || '-'}</td>
              <td>${course.coursePlace || '-'}</td>
              <td><button class="btn btn-danger" onclick="showDeleteConfirmModal(${course.courseId}, this)">🗑 删除</button></td>
          `;
          tableBody.appendChild(row);
        });
      })
      .catch(error => {
        console.error("获取课程数据失败:", error);
      });
  });

  // 显示删除确认弹窗
  function showDeleteConfirmModal(courseId, button) {
    currentCourseId = courseId;
    currentRow = button.closest('tr');
    document.getElementById('deleteConfirmModal').style.display = 'block';
  }

  // 确认删除操作
  function confirmDelete() {
    if (!currentCourseId) return;
    fetch(`/student/courses/delete?student_id=${studentId}&course_id=${currentCourseId}`)
      .then(res => res.json())
      .then(result => {
        if (result && result.data === true) {
          if (currentRow) currentRow.remove();
          alert('退课成功');
        } else {
          alert(result.message || '退课失败');
        }
      })
      .catch(() => {
        alert('退课失败，请重试');
      })
      .finally(() => {
        closeDeleteConfirmModal();
      });
  }

  // 显示用户名
  document.addEventListener('DOMContentLoaded', function () {
    fetch(`/student/${studentId}`)
      .then(res => res.json())
      .then(res => {
        if (res.data && res.data.sname) {
          document.getElementById('username').textContent = res.data.sname + "【学生】";
        }
      })
      .catch(() => {
        document.getElementById('username').textContent = "未登录【学生】";
      });
  });
</script>

</body>
</html>